import { createBrowserRouter } from 'react-router-dom'
import App from '@/App'
import SetState from '@/views/setState'
import ErrorBoundaries from '@/views/ErrorBoundaries'
import OneWay from '@/views/OneWay'
import ControlledOrUncontrolled from '@/views/controlledOrUncontrolled'
import ReactMemo from '@/views/reactMemo'
import Diff from '@/views/Diff'
import UseRouter from '@/views/useRouter'
import ChildrenA from '@/views/useRouter/ChildrenA'
import { lazy, Suspense } from 'react'
// import ChildrenB from '../views/useRouter/ChildrenB'
import UseRedux from '../views/useRedux'

const ChildrenB = lazy(() => import('@/views/useRouter/ChildrenB'))

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
  },
  {
    path: '/setState',
    element: <SetState />
  },
  {
    path: '/errorBoundaries',
    element: <ErrorBoundaries />
  },
  {
    path: '/oneWay',
    element: <OneWay />
  },
  {
    path: '/controlledOrUncontrolled',
    element: <ControlledOrUncontrolled />
  },
  {
    path: '/reactMemo',
    element: <ReactMemo />
  },
  {
    path: '/diff',
    element: <Diff />
  },
  {
    path: '/useRouter/:id?', 
    element: <UseRouter />,
    loader: () => {
      return { age: 18 }
    },
    children: [
      { path: 'a', element: <ChildrenA /> },
      { path: 'b', element: <Suspense><ChildrenB /></Suspense>, shouldRevalidate: ({ currentUrl, nextUrl }) => currentUrl.pathname !== nextUrl.pathname }
    ]
  },
  {
    path: '/useRedux',
    element: <UseRedux />
  }
])

export default router